<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>calc</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 300px;
        --box-height: fit-content;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .demo1 {
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
      }
      .demo2-1 {
        width: 250px;
        border: 1px solid red;
        resize: horizontal;
        overflow: hidden;
      }
      .demo2-1 div {
        height: 50px;
        width: min(calc(100% - 10px), 200px);
        background-color: blanchedalmond;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./11-2d变幻.html">上一篇</a>
      <a href="./13-渐变.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>简单应用——自适应</dt>
        <dd>
          <div class="demo1">
            内容
          </div>
        </dd>
        <dd>
          <pre><code class="language-scss">
font-size: 
calc(16px + 2 * (100vw - 375px) / 39);</code></pre>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>min() / max() / clamp ()</dt>
        <dd>
          1、min()
          <div class="demo2-1">
            <div>
              内容
            </div>
          </div>
        </dd>
        <dd>
          <pre><code class="language-scss">
width: min(calc(100% - 10px), 200px);</code></pre>
        </dd>
        <dd> 2、max()类似，不予赘述</dd>
        <dd>
          3、clamp()表示一个区间的值，clamp(MIN, VAL, MAX)表示：
          <br />
          在区间内，使用首选值VAL；
          <br />
          超出，使用MAX；
          <br />
          低于，使用MIN
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
